import { View } from "@tarojs/components";
import { Search } from "@taroify/icons";
import { Avatar, Popup, Search as SearchBar } from "@taroify/core";
import { getUser } from "@/utils/auth";
import React, { useState } from "react";
import { UserType } from "@/types";
import Taro, { useDidShow } from "@tarojs/taro";

export default ({
  title,
  search,
  right,
}: {
  title?: string;
  search?: () => void;
  right?: React.ReactNode;
}) => {
  const [user, setUser] = useState<UserType>(getUser());
  const [showTop, setShowTop] = useState(false);
  const [value, setValue] = useState("");
  useDidShow(() => setUser(getUser()));
  return (
    <View className="flex bg-[#F6F7FB] h-8 justify-between items-center p-3 fixed inset-x-0 top-0 ">
      <View>
        <Avatar
          onClick={() => Taro.switchTab({ url: "/pages/more/more" })}
          src={user?.avatar}
          size="small"
        />
      </View>
      {title && <View>{title}</View>}
      {right ? right : <Search size="26px" onClick={() => setShowTop(true)} />}
      <Popup
        open={showTop}
        rounded
        placement="top"
        lock
        onClose={() => {
          setShowTop(false);
        }}
      >
        <SearchBar
          value={value}
          placeholder="请输入搜索关键词"
          onChange={(e) => setValue(e.detail.value)}
        />
      </Popup>
    </View>
  );
};
